import SelectMoreComps from './SelectMoreComps'
import SearchBrandInput from './SearchBrandInput'
import ButtonComs from './ButtonComs'
import Icon from '@ui/RJMart/icons'
import HttpUtils from '../../common/utils/HttpUtils'

export default class SelectAreaSupp extends React.Component{
    constructor(props){
        super(props)
        const {suppsList}=this.props
        let suppsList_copy=JSON.parse(JSON.stringify(suppsList))
        this.lists=suppsList_copy.splice(0,8)
        this.lists2=suppsList
        this.state={
            choosed:-1,
            selected_one:-1,
            open:false,     //展开
            multiply:false,  //多选
            lists:this.lists,
            suppInput:''
        }
        this.choosed_supps=[]
        this.choosed_suppIds=[]
    }


    componentWillReceiveProps(nextProps) {
        const {open,multiply}=this.state
        const {suppsList}=nextProps
        let suppsList_copy=JSON.parse(JSON.stringify(suppsList))
        this.lists=suppsList_copy.splice(0,8)
        this.lists2=suppsList
        this.setState({
            lists:(open||multiply)? this.lists2:this.lists,
        })
    }

    setSupp(){
        const {setSupp,}=this.props
        let suppStr=this.choosed_supps.join(',')
        let suppIds=this.choosed_suppIds
        setSupp(suppStr,suppIds)
    }

    clearSupps(){
        this.choosed_supps=[]
        this.choosed_suppIds=[]
    }


    searchSuppList(){
        const {suppInput}=this.state
        const {suppsList}=this.props
        if(!suppInput){
            this.setLists(suppsList)
            return
        }

        if(suppsList){
            let _suppsList=suppsList.filter((item)=>{
                if(item.name.indexOf(suppInput)>-1){
                    return true
                }
                return false
            })
            this.setLists(_suppsList)
        }

    }


    setLists(_suppsList){
        const {open,multiply}=this.state
        let suppsList_copy=JSON.parse(JSON.stringify(_suppsList))
        this.lists=suppsList_copy.splice(0,8)
        this.lists2=_suppsList
        this.setState({
            lists:(open||multiply)? this.lists2:this.lists,
        })
    }






    render(){
        const {choosed,open,selected_one,multiply,lists}=this.state
        const {setSupp,}=this.props
        return(
            <div className={'search-page-select-area-bottom'}>
                <div className={'search-page-select-supp'}>
                    <p>供应商</p>
                </div>
                <div className={'search-page-select-brand-wrapper'}>
                    {
                        (multiply||open)&&(
                            <SearchBrandInput
                                isSupp={true}
                                onChange={(e)=>{
                                    this.setState({
                                        suppInput:e.target.value
                                    },this.searchSuppList)
                                }}
                                onClick={()=>this.searchSuppList()}
                                // onKeyup={(e)=>{
                                //     this.searchSuppList()
                                // }}
                            />
                        )
                    }
                    <div className={'search-page-select-supplist'}>
                        {
                            lists.map((item,index)=>(
                                <TextItem
                                    key={index}
                                    index={index}
                                    item={item}
                                    multiply={multiply}
                                    choosed={choosed}
                                    selected_one={selected_one}
                                    onMouseOver={()=>{
                                        this.setState({
                                            choosed:index
                                        })
                                    }}
                                    onMouseOut={()=>{
                                        this.setState({
                                            choosed:-1
                                        })
                                    }}
                                    selectOne={()=>{
                                        this.setState({
                                            selected_one:index
                                        })
                                        setSupp(item.name,[item.id])
                                    }}
                                    selectMulti={(type)=>{
                                        if(type=='push'){
                                            this.choosed_supps.push(item.name)
                                            this.choosed_suppIds.push(item.id)
                                        }
                                        else if(type=='splice'){
                                            let list= this.choosed_supps.filter((supp)=>{
                                                return  supp!=item.name
                                            })
                                            let listIds=this.choosed_suppIds.filter((supp)=>{
                                                return  supp!=item.id
                                            })
                                            this.choosed_supps=list
                                            this.choosed_suppIds=listIds
                                        }
                                    }}
                                />
                            ))
                        }

                    </div>
                    {
                        multiply&&(
                            <ButtonComs
                                isSupp={true}
                                onConfirm={()=>{
                                    this.setState({
                                        multiply:false,
                                        open:false,
                                        selected_one:-1,
                                        lists:open?this.lists2 :this.lists
                                    })
                                    this.setSupp()
                                }}
                                onCancle={()=>{
                                    this.setState({
                                        multiply:false,
                                        open:false,
                                        selected_one:-1,
                                        lists:open?this.lists2 :this.lists
                                    })
                                    this.clearSupps()
                                }}
                            />
                        )
                    }
                </div>

                {
                    lists&&lists.length>1&&(
                        <SelectMoreComps
                            open={open}
                            multiply={multiply}
                            lists={lists}
                            setOpen={(open)=>{
                                this.setState({
                                    open,
                                    lists:open?this.lists2 :this.lists
                                })
                            }}
                            setMultiply={(multiply)=>{
                                this.setState({
                                    multiply,
                                    selected_one:-1,
                                    lists:this.lists2
                                })
                            }}
                        />
                    )
                }

            </div>
        )
    }
}


class TextItem extends React.Component{
    constructor(){
        super()
        this.state={
            selected:false
        }
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.multiply!=this.props.multiply||nextProps.item!=this.props.item){
            this.setState({
                selected:false
            })
        }
    }


    render(){

        const{index,choosed,selected_one,multiply,item,onMouseOver,onMouseOut,selectOne,selectMulti}=this.props
        const {selected}=this.state
        return(
            <div
                onMouseOver={onMouseOver}
                onMouseOut={onMouseOut}
                onClick={()=>{
                    if(multiply){
                        if(selected){
                            selectMulti('splice')
                        }
                        else{
                            selectMulti('push')
                        }
                        this.setState({
                            selected:!selected
                        })
                        return
                    }
                    selectOne()
                }}
                className={'search-page-select-supplist-item'}
            >
                {
                    multiply&&(
                        selected?
                        <div
                            className={'search-page-select-item-gouxuan1'}
                        >
                            <Icon type={'check'}
                                  color={'#0093EB'}
                                  size={'small'}
                                  width={16}
                                  height={16}
                                  style={{marginTop:-8,marginLeft:-1}}
                            />
                        </div>
                            :
                        <div
                            className={'search-page-select-item-gouxuan'}>
                        </div>
                    )
                }
                <p dangerouslySetInnerHTML={{__html:item.name }} className={this.getClassName(index,choosed,selected_one,selected,multiply)}></p>
            </div>
        )
    }



    getClassName(index,choosed,selected_one,selected,multiply){
        if(multiply){
            if(selected){
                return 'search-page-select-item-p-choose2'
            }
            if(choosed==index){
                return 'search-page-select-item-p-choose2'
            }
            return 'search-page-select-item-p-choose1'
        }
        if(!multiply&&(selected_one==index)){
            return 'search-page-select-item-p-choose'
        }
        if(index==choosed){
            return 'search-page-select-item-p-choose'
        }
        else {
            return 'search-page-select-item-p'
        }
    }


}


